<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head('About me')">
</head>
<body>
    <!--navigator-->
    <nav th:replace="_fragments :: navigator('about')"></nav>

    <!--main body-->
    <div class="my-padded-tb-l">
        <div class="ui container">
            <div class="ui stackable grid">
                <div class="eleven wide column">
                    <div class="ui segment">
                        <img src="https://picsum.photos/id/0/800/400" alt="" class="ui rounded image">
                    </div>
                </div>
                <div class="five wide column">
                    <div class="ui teal top attached segment">
                        <div class="ui header">About me</div>
                    </div>
                    <div class="ui attached segment">
                        <p class="my-text">Ziyue Wang, currently a student in USC, major in CS. Been to several places,
                            but still looking for my utopia. Tried several directions, but returned to the original code.</p>
                        <p class="my-text">Strive to become a qualified SDE and deconstruct the real world with programming ideas.</p>

                    </div>
                    <div class="ui attached segment">
                        <div class="ui orange left pointing label my-margin-bottom-xs">Coding</div>
                        <div class="ui orange left pointing label my-margin-bottom-xs">Thinking</div>
                        <div class="ui orange left pointing label my-margin-bottom-xs">Writing</div>
                        <div class="ui orange left pointing label my-margin-bottom-xs">Gaming</div>
                    </div>
                    <div class="ui attached segment">
                        <div class="ui teal basic left pointing label my-margin-bottom-xs">Java</div>
                        <div class="ui teal basic left pointing label my-margin-bottom-xs">SpringBoot</div>
                        <div class="ui teal basic left pointing label my-margin-bottom-xs">SQL</div>
                        <div class="ui teal basic left pointing label my-margin-bottom-xs">Python</div>
                        <div class="ui teal basic left pointing label my-margin-bottom-xs">AI</div>
                        <div class="ui teal basic left pointing label my-margin-bottom-xs">DeepLearning</div>
                        <div class="ui teal basic left pointing label my-margin-bottom-xs">Unity</div>
                        <div class="ui teal basic left pointing label my-margin-bottom-xs">VR/AR</div>
                    </div>
                    <div class="ui bottom attached segment">
                        <a href="https://github.com/wzy1997zn" target="_blank" class="ui circular icon button"><i class="github icon"></i></a>
                        <a href="javascript:void(0);" class="ui circular icon button" id="WeChatButton"><i class="weixin icon"></i></a>
                        <a href="javascript:void(0);" class="ui circular icon button" id="qqButton" data-content="1278669362"><i class="qq icon"></i></a>
                        <a href="#" class="ui circular icon button" id="resumeButton" data-content="resume"><i class="file alternate icon"></i></a>
                    </div>

                    <div class="ui flowing popup transition hidden" id="WeChatBlock">
                        <img src="../static/images/QR_Wechat.jpg" th:src="@{/images/QR_Wechat.jpg}" alt="" class="ui rounded tiny image">
                    </div>
                </div>
            </div>
        </div>
        
    </div>

    <!--footer-->
    <footer th:replace="_fragments :: footer"></footer>
    <div th:replace="_fragments :: basic_scripts"></div>
    <script>
        $("#menu_toggle").click(function () {
            $('.my-menu-item').toggleClass('my-mobile-hide')
        })

        $('#WeChatButton').popup({
            popup: $('#WeChatBlock.popup'),
            position: 'bottom center'
        });

        $('#qqButton').popup({
            position: 'bottom center'
        });

        $('#resumeButton').popup({
            position: 'bottom center'
        });
    </script>
</body>
</html>